<template>
  <ul>
    <li v-for="item in data" :key="item.text" @click.stop="toggle(item)">
      {{ item.text }}
      <Tree2 :data="item.children" v-show="item.expand" />
    </li>
  </ul>
</template>

<script>
/* 一个组件内部有自己的组件标签 */
export default {
  //
  name: "Tree2", // 必须得有name
  props: ["data"],

  methods: {
    toggle(item) {
      if (item.hasOwnProperty("expand")) {
        item.expand = !item.expand;
      } else {
        this.$set(item, "expand", true);
      }
    },
  },
};
</script>
